<template>
    <div class="goods-detail-container">
        <!-- 商品展示区域 -->
        <div class="goods-show-area">
            <div class="goods-info-card">
                <!-- 商品图片区域 -->
                <div class="goods-image-container">
                    <img :src="`../../public/images/${goods.img}`" class="goods-main-image" />
                    <div class="image-thumbnails" v-if="goods.images && goods.images.length > 0">
                        <img v-for="(img, index) in goods.images" :key="index" :src="`../../public/images/${img}`"
                            class="thumbnail" @click="changeMainImage(img)" />
                    </div>
                </div>

                <!-- 商品基本信息区域 -->
                <div class="goods-basic-info">
                    <h1 class="goods-title">{{ goods.gname }}</h1>
                    <div class="goods-subtitle">{{ goods.introduce }}</div>

                    <!-- 价格区域 -->
                    <div class="price-section">
                        <div class="current-price">¥ {{ goods.price }}</div>
                        <div class="price-details">
                            <span class="original-price" v-if="goods.originalPrice">¥{{ goods.originalPrice }}</span>
                            <span class="discount-tag" v-if="goods.discount">省¥{{ goods.discount }}</span>
                        </div>
                    </div>

                    <!-- 促销信息 -->
                    <div class="promotion-info">
                        <div class="promotion-tag">促销</div>
                        <div class="promotion-content">
                            <p>小米自营 · 正品保障</p>
                            <p>支持7天无理由退货</p>
                        </div>
                    </div>

                    <!-- 评价信息 -->
                    <div class="review-info">
                        <span class="review-count">用户评价 <strong>{{ goods.rvmnum || 0 }}</strong> 条</span>
                        <router-link :to="`/goodsreview?gid=${ goods.gid }`">
                          用户评价
                        </router-link>
                    </div>

                    <!-- 选择区域 -->
                    <div class="selection-area">
                        <!-- 数量选择器 -->
                        <div class="quantity-selector">
                            <span class="selector-label">数量</span>
                            <div class="quantity-control">
                                <button class="control-btn minus" @click="decreaseQuantity"
                                    :disabled="num <= 1">-</button>
                                <input type="number" v-model.number="num" min="1" class="quantity-input" />
                                <button class="control-btn plus" @click="increaseQuantity">+</button>
                            </div>
                            <span class="stock-info" v-if="goods.stock">库存 {{ goods.stock }} 件</span>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <button class="add-to-cart-btn" @click="addCart">
                            <i class="icon-cart"></i> 加入购物车
                        </button>
                        <button class="buy-now-btn" @click="buyNow">
                            立即购买
                        </button>
                        <button class="favorite-btn" @click="addToFavorite">
                            <i class="icon-heart"></i> 收藏
                        </button>
                    </div>

                    <!-- 服务承诺 -->
                    <div class="service-promise">
                        <div class="service-item">
                            <i class="icon-service"></i>
                            <span>正品保证</span>
                        </div>
                        <div class="service-item">
                            <i class="icon-service"></i>
                            <span>极速配送</span>
                        </div>
                        <div class="service-item">
                            <i class="icon-service"></i>
                            <span>7天无理由</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>




    </div>
</template>

<script setup>
import axios from '../api/axios'
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const router = useRouter()
const goods = ref({})
const num = ref(1)

// 获取商品详情
axios.post('/api/goods/goodsByid', { gid: route.query.goodsid }).then(res => {
    if (res.data.code == 200) {
        goods.value = res.data.goods
        console.log(goods.value)
        // 假设API返回了图片数组，如果没有可以添加默认值
        if (!goods.value.images) {
            goods.value.images = [goods.value.img]
        }
    } else {
        alert(res.data.msg)
    }
})

// 切换主图
const changeMainImage = (img) => {
    goods.value.img = img
}

// 数量增减
const decreaseQuantity = () => {
    if (num.value > 1) num.value--
}

const increaseQuantity = () => {
    if (goods.value.stock && num.value >= goods.value.stock) {
        alert(`库存仅剩 ${goods.value.stock} 件`)
        return
    }
    num.value++
}

// 监听数量输入
watch(num, (newVal) => {
    if (newVal < 1) num.value = 1
    if (goods.value.stock && newVal > goods.value.stock) {
        num.value = goods.value.stock
        alert(`库存仅剩 ${goods.value.stock} 件`)
    }
})

// 加入购物车
const addCart = async () => {
    if (!sessionStorage.getItem('user')) {
        alert('请您先登录!')
        router.push('/login')
        return
    }

    try {
        const userid = JSON.parse(sessionStorage.getItem('user')).userid
        const response = await axios.post('/api/carts/addcart', {
            userid: userid,
            goods: goods.value,
            num: num.value
        })

        alert(response.data.msg)
        // 可以在这里添加购物车动画效果
    } catch (error) {
        alert('添加购物车失败，请重试')
        console.error(error)
    }
}

// 立即购买
const buyNow = () => {
    if (!sessionStorage.getItem('user')) {
        alert('请您先登录!')
        router.push('/login')
        return
    }

    // 这里可以跳转到结算页面
    router.push({
        path: '/checkout',
        query: {
            goodsid: goods.value.gid,
            quantity: num.value
        }
    })
}

// 添加到收藏
const addToFavorite = () => {
    if (!sessionStorage.getItem('user')) {
        alert('请您先登录!')
        router.push('/login')
        return
    }

    // 这里可以调用收藏API
    alert('已添加到收藏夹')
}
</script>

<style lang="scss" scoped>
.goods-detail-container {
    background-color: #f5f5f5;
    padding-bottom: 40px;
    min-height: 100vh;

    .goods-show-area {
        width: 1220px;
        margin: 0 auto;
        padding: 20px 0;

        .goods-info-card {
            display: flex;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;

            .goods-image-container {
                width: 460px;
                padding: 30px;
                border-right: 1px solid #f5f5f5;

                .goods-main-image {
                    width: 400px;
                    height: 400px;
                    object-fit: contain;
                    display: block;
                    margin: 0 auto;
                    cursor: zoom-in;
                    transition: transform 0.3s;

                    &:hover {
                        transform: scale(1.05);
                    }
                }

                .image-thumbnails {
                    display: flex;
                    justify-content: center;
                    margin-top: 20px;
                    gap: 10px;

                    .thumbnail {
                        width: 60px;
                        height: 60px;
                        border: 1px solid #eee;
                        cursor: pointer;
                        transition: all 0.3s;

                        &:hover {
                            border-color: #ff6700;
                            transform: translateY(-3px);
                        }
                    }
                }
            }

            .goods-basic-info {
                flex: 1;
                padding: 30px;

                .goods-title {
                    font-size: 24px;
                    font-weight: 700;
                    color: #333;
                    margin-bottom: 10px;
                    line-height: 1.4;
                }

                .goods-subtitle {
                    font-size: 14px;
                    color: #999;
                    margin-bottom: 20px;
                    line-height: 1.6;
                }

                .price-section {
                    background: #f9f9f9;
                    padding: 15px;
                    border-radius: 4px;
                    margin-bottom: 20px;

                    .current-price {
                        font-size: 28px;
                        color: #ff6700;
                        font-weight: 700;
                        margin-bottom: 5px;
                    }

                    .price-details {
                        font-size: 14px;

                        .original-price {
                            color: #999;
                            text-decoration: line-through;
                            margin-right: 10px;
                        }

                        .discount-tag {
                            background: #ff6700;
                            color: #fff;
                            padding: 2px 5px;
                            border-radius: 3px;
                            font-size: 12px;
                        }
                    }
                }

                .promotion-info {
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 20px;
                    padding-bottom: 15px;
                    border-bottom: 1px solid #f5f5f5;

                    .promotion-tag {
                        color: #999;
                        margin-right: 15px;
                        width: 40px;
                    }

                    .promotion-content {
                        flex: 1;

                        p {
                            margin: 5px 0;
                            color: #666;
                            font-size: 14px;
                        }
                    }
                }

                .review-info {
                    display: flex;
                    align-items: center;
                    margin-bottom: 25px;
                    font-size: 14px;
                    color: #666;

                    .review-count {
                        margin-right: 20px;

                        strong {
                            color: #ff6700;
                        }
                    }

                    .review-rate strong {
                        color: #ff6700;
                    }
                }

                .selection-area {
                    margin-bottom: 30px;

                    .quantity-selector {
                        display: flex;
                        align-items: center;
                        margin-bottom: 15px;

                        .selector-label {
                            width: 60px;
                            color: #999;
                        }

                        .quantity-control {
                            display: flex;
                            align-items: center;
                            margin-right: 20px;

                            .control-btn {
                                width: 30px;
                                height: 30px;
                                background: #f5f5f5;
                                border: 1px solid #ddd;
                                color: #666;
                                font-size: 16px;
                                cursor: pointer;
                                transition: all 0.3s;

                                &:hover {
                                    background: #eee;
                                }

                                &:disabled {
                                    color: #ccc;
                                    cursor: not-allowed;
                                    background: #f9f9f9;
                                }
                            }

                            .quantity-input {
                                width: 50px;
                                height: 30px;
                                border-top: 1px solid #ddd;
                                border-bottom: 1px solid #ddd;
                                border-left: none;
                                border-right: none;
                                text-align: center;
                                font-size: 14px;

                                &:focus {
                                    outline: none;
                                }

                                /* 隐藏数字输入框的上下箭头 */
                                &::-webkit-outer-spin-button,
                                &::-webkit-inner-spin-button {
                                    -webkit-appearance: none;
                                    margin: 0;
                                }

                                &[type=number] {
                                    -moz-appearance: textfield;
                                }
                            }
                        }

                        .stock-info {
                            color: #999;
                            font-size: 14px;
                        }
                    }
                }

                .action-buttons {
                    display: flex;
                    align-items: center;
                    margin-bottom: 30px;
                    gap: 15px;

                    button {
                        padding: 12px 30px;
                        border-radius: 4px;
                        font-size: 16px;
                        cursor: pointer;
                        transition: all 0.3s;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        i {
                            margin-right: 5px;
                            font-size: 18px;
                        }
                    }

                    .add-to-cart-btn {
                        background: #ff6700;
                        color: #fff;
                        border: 1px solid #ff6700;

                        &:hover {
                            background: #ff8533;
                            border-color: #ff8533;
                        }
                    }

                    .buy-now-btn {
                        background: #f56600;
                        color: #fff;
                        border: 1px solid #f56600;

                        &:hover {
                            background: #ff8533;
                            border-color: #ff8533;
                        }
                    }

                    .favorite-btn {
                        background: #fff;
                        color: #666;
                        border: 1px solid #ddd;

                        &:hover {
                            color: #ff6700;
                            border-color: #ff6700;
                        }
                    }
                }

                .service-promise {
                    display: flex;
                    padding-top: 15px;
                    border-top: 1px solid #f5f5f5;

                    .service-item {
                        display: flex;
                        align-items: center;
                        margin-right: 30px;
                        color: #666;
                        font-size: 14px;

                        i {
                            margin-right: 5px;
                            color: #ff6700;
                        }
                    }
                }
            }
        }
    }

}

/* 响应式设计 */
@media (max-width: 1240px) {
    .goods-detail-container {

        .goods-show-area,
        .goods-detail-nav,
        .detail-content-area {
            width: 96%;
        }
    }
}

@media (max-width: 768px) {
    .goods-detail-container {
        .goods-info-card {
            flex-direction: column !important;

            .goods-image-container {
                width: 100% !important;
                border-right: none !important;
                border-bottom: 1px solid #f5f5f5;

                .goods-main-image {
                    width: 100% !important;
                    height: auto !important;
                }
            }
        }

        .action-buttons {
            flex-wrap: wrap;

            button {
                flex: 1;
                min-width: 120px;
                margin-bottom: 10px;
            }
        }
    }
}
</style>